<script setup lang="ts">
import { computed, useSlots } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'up'
  },
  text: {
    type: String,
    default: '文字'
  },
  upIconColor: {
    type: String,
    default: '#f5222d'
  },
  downIconColor: {
    type: String,
    default: '#517340'
  },
  reverseColor: {
    type: Boolean,
    default: false
  },
  upTextconColor: {
    type: String,
    default: '#f5222d'
  },
  downTextColor: {
    type: String,
    default: '#517340'
  },
  upIcon: {
    type: String,
    default: 'el-icon-arrowup'
  },
  downIcon: {
    type: String,
    default: 'el-icon-arrowdown'
  }
})

const slots = useSlots()

const textColor = computed(() => {
  return props.type === 'up' ? props.upTextconColor : props.downTextColor
})
</script>

<template>
  <div class="trend-page">
    <div class="text">
      <slot v-if="slots.default"></slot>
      <div v-else :style="{ color: textColor }">{{ text }}</div>
    </div>
    <div class="icon">
      <component :is="upIcon" v-if="type === 'up'" :style="{ color: !reverseColor ? upIconColor : '#517340' }" ></component>
      <component :is="downIcon" v-else :style="{ color: !reverseColor ? downIconColor : '#f5222d' }" ></component>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.trend-page {
  display: flex;
  align-items: center;

  .text {
    font-size: 16px;
    margin-right: 4px;
  }

  .icon {
    display: flex;
    align-items: center;
    svg {
      width: 1em;
      height: 1em;
    }
  }
}
</style>
